<template>
    <div class="body" id="app-home">
        <myNav></myNav>
        <my-menu :showButton="showButton"></my-menu>
        <nuxt />
        <myFooter></myFooter>
        <no-ssr placeholder="Loading...">
            <rightFixed
                :showButton="showButton"
                @goTopSmooth="goTopSmooth"
            ></rightFixed>
            <!-- 获取到优惠券弹窗 -->
            <div v-if="CouponShow" class="big-dialog">
                <img
                    v-if="CouponGetType == 1"
                    style="cursor: auto; width: 489px"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/new-user.png"
                    alt="领取奖励"
                />
                <div v-if="CouponGetType == 1" class="new-user-text">
                    {{ getAdminCoupon }}
                </div>
                <img
                    v-if="CouponGetType == 2"
                    style="cursor: auto; width: 531px"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/CouponGetType2.png"
                    alt="领取奖励"
                />
                <div v-if="CouponGetType == 2" class="new-user-text2">
                    {{ getAdminCoupon }}
                </div>
                <div
                    class="smalldjck"
                    @click.stop="
                        CouponShow = false;
                        go('/user/mycoupon', '');
                    "
                ></div>

                <i
                    class="el-icon-circle-close nice-user-close"
                    :style="{
                        top:
                            CouponGetType == 1
                                ? 'calc(50% + 350px)'
                                : 'calc(50% + 330px)',
                    }"
                    @click="CouponShow = false"
                ></i>
            </div>
            <div v-if="moenyShow" class="big-dialog">
                <img
                    v-if="showLeafType == 1"
                    class="big-dialog-img"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/nice-user.png"
                    alt="领取奖励"
                />
                <img
                    v-if="showLeafType == 2"
                    class="big-dialog-img"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/very-nice-user.png"
                    alt="领取奖励"
                />
                <i
                    class="el-icon-circle-close nice-user-close"
                    :style="{
                        top:
                            showLeafType == 1
                                ? 'calc(50% + 250px)'
                                : 'calc(50% + 300px)',
                    }"
                    @click="moenyShow = false"
                ></i>
                <div
                    v-if="showLeafType == 1"
                    class="nice-user-go"
                    @click.stop="
                        moenyShow = false;
                        go('/user/mybamboo', '');
                    "
                ></div>
                <div
                    v-if="showLeafType == 2"
                    class="nice-user-go2"
                    @click.stop="
                        moenyShow = false;
                        go('/user/mybamboo', '');
                    "
                ></div>
            </div>
            <div v-show="false">
                <audio
                    id="soundAudio"
                    ref="music"
                    preload="auto"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index-video/sound.MP3"
                ></audio>
            </div>
            <payVip :show="payVipShow"></payVip>
            <newBox v-if="vipNoTimeShow"></newBox>
            <div v-show="$route.path != '/'" class="xzcs-ai">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_ai.gif"
                    alt="小竹财税AI"
                    @click="go2('/chatgpt/xzcsgpt')"
                />
            </div>

            <div v-show="loginTipShow" class="right-bottom-model-no-login">
                <div class="right-bottom-model-no-login-text">
                    登录小竹财税，获取<span>18W＋</span>税法及模板库
                    <i class="el-icon-close" @click="checkloginTipShow"></i>
                </div>
                <div class="right-bottom-model-no-login-text2">
                    VIP登录，畅享<span>17项</span>专属权益
                </div>
                <div class="right-bottom-model-no-login-button">
                    <div @click="goLogin">立即登录</div>
                </div>
            </div>

            <div v-if="showHuoDongModel" class="sb-showHuoDongModel">
                <div>
                    <img
                        :src="showHuoDongModelData"
                        alt=""
                        @click="clickshowHuoDongModel"
                    />
                    <i
                        class="el-icon-circle-close"
                        @click.stop="showHuoDongModelhide"
                    ></i>
                </div>
            </div>

            <div v-if="UserActivity30Show" class="sb-showHuoDongModel">
                <div>
                    <img
                        :src="UserActivity30Obj.pic"
                        alt=""
                        @click="
                            go(UserActivity30Obj.go_url, {});
                            UserActivity30Obj = null;
                        "
                    />
                    <i
                        class="el-icon-circle-close"
                        @click.stop="UserActivity30Obj = null"
                    ></i>
                </div>
            </div>

            <div v-if="customPushLogShow" class="sb-showHuoDongModel">
                <div>
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/custom_push_log_model.png"
                        alt=""
                        @click="goVipOnlyDetail"
                    />
                    <i
                        class="el-icon-close"
                        style="top: 47px; right: 11px"
                        @click.stop="goVipOnlyDetail(false)"
                    ></i>
                </div>
            </div>

            <div v-if="selectPositionShow" class="sb-showHuoDongModel">
                <div class="home-select-position">
                    <div class="title">请选择您的用户类别</div>
                    <div class="position-list">
                        <div
                            class="position-item"
                            :class="{ 'position-item-s': positionIndex == 2 }"
                            @click="selectPosition(2)"
                        >
                            <img
                                src="~/assets/images/position/iocn1.png"
                                alt=""
                            />
                            <div class="name">出纳</div>
                            <div class="text">相信自己，未来可期！</div>
                        </div>
                        <div
                            class="position-item"
                            :class="{ 'position-item-s': positionIndex == 1 }"
                            @click="selectPosition(1)"
                        >
                            <img
                                src="~/assets/images/position/iocn1.png"
                                alt=""
                            />
                            <div class="name">会计</div>
                            <div class="text">
                                再坚持一下，就不用干“会计”了!
                            </div>
                        </div>
                        <div
                            class="position-item"
                            :class="{ 'position-item-s': positionIndex == 3 }"
                            @click="selectPosition(3)"
                        >
                            <img
                                src="~/assets/images/position/iocn1.png"
                                alt=""
                            />
                            <div class="name">主管</div>
                            <div class="text">
                                从一个人到一群人，理解你的不易！
                            </div>
                        </div>
                        <div
                            class="position-item"
                            :class="{ 'position-item-s': positionIndex == 4 }"
                            @click="selectPosition(4)"
                        >
                            <img
                                src="~/assets/images/position/iocn1.png"
                                alt=""
                            />
                            <div class="name">经理</div>
                            <div class="text">来吧，你可以更好！</div>
                        </div>
                        <div
                            class="position-item"
                            :class="{ 'position-item-s': positionIndex == 5 }"
                            @click="selectPosition(5)"
                        >
                            <img
                                src="~/assets/images/position/iocn1.png"
                                alt=""
                            />
                            <div class="name">总监</div>
                            <div class="text">放手也是一种快乐！</div>
                        </div>
                        <div
                            class="position-item"
                            :class="{ 'position-item-s': positionIndex == 6 }"
                            @click="selectPosition(6)"
                        >
                            <img
                                src="~/assets/images/position/iocn1.png"
                                alt=""
                            />
                            <div class="name">老板</div>
                            <div class="text">嗨，老板，记得业财融合哦！</div>
                        </div>
                    </div>
                    <div class="select-position" @click="clickPostion">
                        确定
                    </div>
                </div>
            </div>
        </no-ssr>
    </div>
</template>

<script>
import myNav from "@/components/nav/myNav.vue";
import myMenu from "@/components/nav/myMenu_new";
import myFooter from "@/components/nav/myFooter";
import rightFixed from "@/components/index/rightFixed";

import mixinsUser from "~/mixins/user";
import mixinsIndex from "~/mixins/index";
import payVip from "@/components/nav/payVip";
import newBox from "@/components/index/newBox";

import { mapState, mapMutations } from "vuex";

import {
    editUserInfo,
    show_login_window_new,
} from "@/assets/api/userCenterApi.js";

export default {
    components: {
        myNav,
        myMenu,
        myFooter,
        rightFixed,
        payVip,
        newBox,
    },
    mixins: [mixinsUser, mixinsIndex],
    data() {
        return {
            loginTipShow: false,
            positionIndex: 0,
        };
    },
    mounted() {
        let loginTipShow = localStorage.getItem("loginTipShow");
        let token = localStorage.getItem("token");

        if (!loginTipShow && !token) {
            this.loginTipShow = true;
        } else {
            this.loginTipShow = false;
        }
        // 未登录 浏览十条详情后
        if (!token && this.$route.fullPath.includes(".html")) {
            let browseNum = localStorage.getItem("browseNum");
            if (browseNum) {
                browseNum = parseInt(browseNum);
                if (browseNum > 9) {
                    this.$confirm("建议登录后浏览", "提示", {
                        confirmButtonText: "去登录",
                        cancelButtonText: "再看看",
                    })
                        .then(() => {
                            this.$router.push({
                                path: "/login",
                                query: {
                                    url:
                                        window.location.pathname +
                                        window.location.search,
                                },
                            });
                        })
                        .catch(() => {
                            localStorage.setItem("browseNum", "1");
                        });
                } else {
                    localStorage.setItem("browseNum", browseNum + 1);
                }
            } else {
                localStorage.setItem("browseNum", "1");
            }
        }
    },
    computed: {
        ...mapState("common", {
            payVipShow: (state) => state.payVipShow,
            vipNoTimeShow: (state) => state.vipNoTimeShow,
        }),
    },
    methods: {
        ...mapMutations("common", ["set_payVipShow", "set_vipNoTimeShow"]),
        go(path, params) {
            this.$router.push({ path: path, query: params });
        },
        go2(path) {
            window.open(path, "_blank");
        },
        goLogin() {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                    click: "1",
                },
            });
        },
        checkloginTipShow() {
            this.loginTipShow = false;
            localStorage.setItem("loginTipShow", "1");
        },
        async clickshowHuoDongModel() {
            // this.set_payVipShow({ show: true, index: 1 });
            const res = await show_login_window_new({});
            if (res.code == 1) {
                this.showHuoDongModelhide();
                if (res.data.is_login_window_outside_pc == 1) {
                    window.open(res.data.pc_login_window_url, "_blank");
                } else {
                    this.$router.push({
                        path: res.data.pc_login_window_url,
                    });
                }
            }
            // this.$router.push({
            //     path: "/mynews/notice?id=65",
            // });
        },
        showHuoDongModelhide() {
            this.showHuoDongModel = false;
            // localStorage.setItem("loginTipShow2", "1");
            const currentTime = Date.now();
            localStorage.setItem("loginlastTime", currentTime.toString());
        },

        selectPosition(index) {
            this.positionIndex = index;
        },

        async clickPostion() {
            const res = await editUserInfo({
                position: this.positionIndex,
            });
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.selectPositionShow = false;
                this.getUserInfo();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.big-dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    background: rgba($color: #000000, $alpha: 0.4);
    .big-dialog-img {
        cursor: auto;
        width: 448px;
    }
    .nice-user-close {
        position: absolute;
        left: calc(50% - 18px);
        font-size: 36px;
        color: #fff;
        cursor: pointer;
    }
    .nice-user-go {
        width: 236px;
        height: 56px;
        position: absolute;
        top: calc(50% + 130px);
        left: calc(50% - 110px);
        cursor: pointer;
    }
    .nice-user-go2 {
        width: 282px;
        height: 61px;
        position: absolute;
        top: calc(50% + 170px);
        left: calc(50% - 140px);
        cursor: pointer;
    }
    img {
        cursor: pointer;
    }
    .big-close {
        text-align: center;
        position: relative;
        left: -114px;
        top: -90px;
        width: 50px;
        height: 20px;
        border-radius: 15px;
        font-size: 14px;
        color: #fff;
        background-color: #000000;
        opacity: 0.7;
    }
    .el-icon-circle-close {
        // position: relative;
        // left: -11px;
        // top: -206px;
        // color: #fff;
        // font-size: 34px;
    }
    .smalldjck {
        width: 294px;
        height: 104px;
        line-height: 55px;
        background: transparent;
        text-align: center;
        font-size: 23px;
        font-weight: 500;
        position: absolute;
        top: calc(50% + 190px);
        cursor: pointer;
    }
    .smalldjck2 {
        width: 236px;
        height: 56px;
        // background: linear-gradient(180deg, #fff249 0%, #ffb917 100%);
        // box-shadow: 0px 4px 14px 0px rgba(199, 55, 51, 0.7);
        border-radius: 25px;
        // font-size: 24px;
        // color: #ff3734;
        // text-align: center;
        // line-height: 50px;
        cursor: pointer;
    }
    .new-user-text {
        color: #ff075a;
        font-weight: 700;
        font-size: 120px;
        position: absolute;
        left: calc(50% - 166px);
        top: calc(50% + 0px);
    }
    .new-user-text2 {
        color: #ff075a;
        font-weight: 700;
        font-size: 120px;
        position: absolute;
        left: calc(50% - 32px);
        top: calc(50% - 22px);
        transform: rotate(-38deg);
    }
    .smalltext {
        position: absolute;
        bottom: calc(50% - 76px);
        .admincoupon {
            text-transform: none;
            background: linear-gradient(90deg, #ff651f 0%, #ff075a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            font-size: 31px;
            span {
                font-size: 74px;
            }
        }
        .admincoupon2 {
            line-height: 1;
            padding-bottom: 5px;
        }
        div {
            // background: linear-gradient(180deg, #ff6a44 0%, #fe1000 100%);
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            text-align: center;
        }
    }
    .smalltext2 {
        position: absolute;
        top: calc(50% - 165px);
        .admincoupon {
            text-align: center;
            text-transform: none;
            background: linear-gradient(90deg, #ff651f 0%, #ff075a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            font-size: 36px;
            span {
                font-size: 58px;
            }
        }
    }
}

.xzcs-ai {
    position: fixed;
    bottom: 0;
    // left: calc(50vw - 725px - 120px);
    left: calc(50vw - 600px - 120px);
    z-index: 100;
    img {
        width: 100px;
        height: auto;
        cursor: pointer;
    }
}

.right-bottom-model-no-login {
    width: 509px;
    height: 132px;
    background: linear-gradient(180deg, #b2d5ff 0%, #ffffff 45%);
    border-radius: 5px;
    position: fixed;
    bottom: 20px;
    right: 90px;
    padding: 24px 36px 22px;
    z-index: 999;
    .right-bottom-model-no-login-text {
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        position: relative;
        span {
            color: #ff0000;
        }
        i {
            font-size: 30px;
            color: #c7c7c7;
            position: absolute;
            top: -12px;
            right: -20px;
            cursor: pointer;
        }
    }

    .right-bottom-model-no-login-text2 {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-top: 15px;
        span {
            color: #ff0000;
        }
    }

    .right-bottom-model-no-login-button {
        display: flex;
        justify-content: flex-end;
        padding-top: 3px;
        div {
            width: 95px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            background: linear-gradient(90deg, #38b9fb 0%, #2672f3 100%);
            border-radius: 5px;
            user-select: none;
            cursor: pointer;
            &:hover {
                opacity: 0.8;
            }
            &:active {
                opacity: 0.9;
            }
        }
    }
}

.sb-showHuoDongModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: 0.4);

    > div {
        position: relative;
        cursor: pointer;
        i {
            color: #fff;
            font-size: 34px;
            position: absolute;
            bottom: -56px;
            right: 178px;
        }
    }
    img {
        width: 387px;
        height: auto;
    }
}

// @media (max-width: 1499px) {
//     .xzcs-ai {
//         left: calc(50vw - 600px - 120px);
//     }
// }

.home-select-position {
    cursor: unset !important;
    background-image: url(~/assets/images/position/home-select-position-bj.png);
    background-size: 100% 100%;
    width: 852px;
    height: 474px;
    background-color: #ffffff;
    border-radius: 25px;
    .title {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        text-align: center;
        padding-top: 80px;
    }
    .select-position {
        width: 310px;
        height: 48px;
        background: #026beb;
        border-radius: 20px;
        line-height: 48px;
        text-align: center;
        cursor: pointer !important;
        user-select: none;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        margin: 25px auto 0;
        &:hover {
            opacity: 0.9;
        }
        &:active {
            opacity: 0.8;
        }
    }
    .position-list {
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28px;
    }
    .position-item-s {
        box-shadow: 0px 2px 6px 0px rgba(127, 192, 255, 0.8);
        border: 1px solid #2792ff;
    }
    .position-item {
        cursor: pointer !important;
        text-align: center;
        width: 124px;
        height: 230px;
        background: #f9fcff;
        border-radius: 10px;
        padding: 17px 0 0;
        img {
            width: 70px;
            height: 70px;
            display: block;
            margin: 0 auto;
        }
        .name {
            padding-top: 20px;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
        }
        .text {
            width: 90px;
            margin: 0 auto;
            padding-top: 10px;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            line-height: 22px;
        }
        &:hover {
            box-shadow: 0px 2px 6px 0px rgba(127, 192, 255, 0.8);
            border: 1px solid #2792ff;
        }
    }
}
</style>

<style>
* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
}
audio,
button,
camera,
canvas,
checkbox,
div,
form,
icon,
image,
input,
label,
live-player,
live-pusher,
map,
navigator,
picker,
picker-view,
progress,
radio,
scroll-view,
slider,
swiper,
switch,
text,
video,
view,
web-view {
    box-sizing: border-box;
}
#app {
    background-color: #f0f0f2;
}
.body {
    background: #f7f7f7;
}

.service-notify {
    animation-name: service-notify-animation;
    animation-duration: 0.6s;
    animation-iteration-count: 2;
    z-index: 10000000 !important;
}

.fYcoZV {
    z-index: 999;
}

@keyframes service-notify-animation {
    0% {
        background-color: #1c87f3;
        transform: rotate(1deg);
    }
    50% {
        background-color: #ffffff;
        transform: rotate(-1deg);
    }
    100% {
        background-color: #1c87f3;
        transform: rotate(1deg);
    }
}

.el-pagination.is-background .el-pager li {
    background-color: #ffffff !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1c87f3 !important;
}

.vue-puzzle-vcode {
    z-index: 9999 !important;
}

.el-message {
    z-index: 10000 !important;
}

/* @font-face {
  font-family: "ZTGB2312";
  src: url("~/assets/images/images/GB2312.TTF") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Helvetica";
  src: url("~/assets/images/images/GB2312.TTF") format("truetype");
  font-weight: 400;
} */

a {
    text-decoration: none;
    color: #333333;
}

em {
    color: #fa3534;
    font-style: normal;
}

.ksyifn {
    bottom: 65px !important;
    right: 15px;
}

.big-top-el-message {
    top: 136px !important;
}

.vip-message-box {
    width: 300px;
}

.vip-message-box .el-button {
    width: 100%;
}

.vip-message-box .el-message-box__title {
    text-align: center;
}
.dialog-right {
    margin-left: calc(50vw + 204px);
}
.el-button--warning {
    color: #fff;
    background-color: #ff6900;
    border-color: #ff6900;
}
.el-button--warning:focus,
.el-button--warning:hover {
    background: #ff8733;
    border-color: #ff8733;
    color: #fff;
}

.el-breadcrumb__inner {
    line-height: 1.5;
}
.el-breadcrumb__inner a {
    font-weight: 400;
}

.colorff4545 {
    color: #ff4545;
}

.el-popconfirm__main {
    margin: 0.4em 0 0.8em;
}
.miniPadding .el-dialog__body {
    padding: 0;
}
</style>